<template>
  <div class="empty">
    <button @click="toHome">toHome</button>
    <div class="generage" @click="getPic">生成图片</div>
    <img ref="img_place" src="" alt="" srcset="" />
    <a ref="img" id="create_image" download="下载的图片">下载图片</a>
    <div id="capture_pic" class="canvasPic">
      我是即将生产的图片模板
    </div>
  </div>
</template>

<script>
/**
 *@author
 *@createTime  2021/08/4
 *@version  v1.0
 *@desc  空状态页面
 *@params
 */
import html2canvas from "html2canvas";

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {};
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    getPic() {
      html2canvas(document.querySelector("#capture_pic")).then((canvas) => {
        let url = canvas.toDataURL(); //图片地址
        this.$refs.img.href = url;
        this.$refs.img_place.src = url;
        var a = document.createElement("a");
        a.setAttribute(
          "href",
          "https://hq-tianyi.oss-cn-shenzhen.aliyuncs.com/callback/wYB8mCsei8.png"
        );
        document.body.appendChild(a);
        a.click();
        // a.remove();
        // document.body.appendChild(canvas)
      });
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
};
</script>
<style lang="scss" scoped>
.empty {
  .canvasPic {
    width: 300px;
    height: 300px;
    background-color: aqua;
  }
}
</style>
